<template>
  <div class="switch-main">
    <input type="checkbox" :checked="modelValue" :id="id" @change="change" hidden />
    <label :for="id" class="switch"></label>
    <div class="shade" v-if="disabled"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  modelValue: boolean
  disabled?: boolean
}

withDefaults(defineProps<Props>(), {
  disabled: false
})

const emit = defineEmits(['update:modelValue', 'change'])

const id = ref(crypto.randomUUID())

const change = (e: any) => {
  emit('change', e.target.checked)
}
</script>

<style scoped lang="scss">
$off-color: #b4b4b4;
.switch-main {
  display: flex;
  overflow: hidden;
  position: relative;

  input:checked + label {
    border-color: $main-color;
    background: $main-color;

    &::before {
      left: 20px;
    }
  }

  .switch {
    height: 21px;
    width: 40px;
    border-radius: 15px;
    position: relative;
    background: $off-color;
    cursor: pointer;
    border: 2px solid $off-color;

    &::before {
      content: '';
      height: 18px;
      width: 18px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      left: 0;
      transition: 0.4s;
    }
  }

  .shade {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    opacity: 0.3;
    cursor: not-allowed;
  }
}
</style>
